<template>
  <div
    class="cesium-viewer-toolbar-component"
    :style="{ right: threeWidth + 6 + 'px' }"
  >
    <div class="toolbar-box">
      <div
        v-for="item in defaultList"
        :key="item.sort"
        :title="item.title"
        @click="toolsHandle(item.handle)"
      >
        <i :class="item.icon" />
      </div>
    </div>
  </div>
</template>

<script>
import DxCommonUtils from "@/utils/cesiumDxUtils/common3D";
import { mapState } from "vuex";
export default {
  name: "CesiumViewerToolbar",
  computed: {
    ...mapState({
      threeWidth: (state) => state.app.threeWidth, // three模型全屏展示
    }),
  },

  data() {
    return {
      defaultList: [
        {
          sort: 1,
          title: "放大",
          icon: "el-icon-circle-plus",
          handle: "toolsHandleZoomAdd",
          isActive: null,
        },
        {
          sort: 2,
          title: "缩小",
          icon: "el-icon-remove",
          handle: "toolsHandleZoomMinus",
          isActive: null,
        },
        {
          sort: 3,
          title: "视角",
          icon: "el-icon-s-promotion",
          handle: "toolsHandleAngleView",
          isActive: null,
        },
        {
          sort: 4,
          title: "指北",
          icon: "dx-zhibeizhen1",
          handle: "toolsHandleRefersToNorth",
          isActive: null,
        },
        {
          sort: 5,
          title: "工具",
          icon: "dx-gongju2",
          handle: "toolsHandleTool",
        },
        {
          sort: 6,
          title: "图层",
          icon: "dx-layer",
          handle: "toolsHandlelayer",
        },
        // {
        //   sort: 7,
        //   title: "鹰眼",
        //   icon: "dx-yingyan2",
        //   handle: "toolsHandleEagleEye",
        //   isActive: false,
        // },
        {
          sort: 8,
          title: "截图",
          icon: "el-icon-camera-solid",
          handle: "toolsHandleScreenshots",
          isActive: null,
        },
        {
          sort: 9,
          title: "删除",
          icon: "el-icon-delete-solid",
          handle: "toolsHandleDelete",
          isActive: null,
        },
        // {
        //   sort: 10,
        //   title: "大屏",
        //   icon: "el-icon-monitor",
        //   handle: "toolsHandleBigScreens",
        //   isActive: null,
        // },
        // {
        //   sort: 10,
        //   title: "设置",
        //   icon: "el-icon-s-tools",
        //   handle: "toolsHandleInstall",
        //   isActive: null,
        // },
        {
          sort: 11,
          title: "大屏",
          icon: "el-icon-monitor",
          handle: "toolsHandleBigScreens",
          isActive: null,
        },
      ],
      timer: null,
    };
  },
  methods: {
    toolsHandle(handle) {
      this[handle]();
    },
    // 1放大
    toolsHandleZoomAdd() {
      DxCommonUtils.tools.handleZoomAdd();
    },
    // 2缩小
    toolsHandleZoomMinus() {
      DxCommonUtils.tools.handleZoomMinus();
    },
    // 3视角
    toolsHandleAngleView() {
      DxCommonUtils.tools.handleAngleView();
    },
    // 4工具
    toolsHandleTool() {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
        this.$bus.emit("cesiumBusEvent", "toolsWidgets");
        return;
      } else {
        this.$bus.emit("cesiumBusEvent", "toolsWidgets");
      }
      this.timer = setTimeout(() => {
        this.$bus.emit("cesiumBusEvent", "toolsWidgets");
        clearTimeout(this.timer);
        this.timer = null;
      }, 3000);
    },
    // 5 图层
    toolsHandlelayer() {
      // this.$bus.emit("cesiumBusEvent", "layerWidgets");
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
        this.$bus.emit("cesiumBusEvent", "layerWidgets");
        return;
      } else {
        this.$bus.emit("cesiumBusEvent", "layerWidgets");
      }
      this.timer = setTimeout(() => {
        this.$bus.emit("cesiumBusEvent", "layerWidgets");
        clearTimeout(this.timer);
        this.timer = null;
      }, 3000);
    },

    // 6 鹰眼
    toolsHandleEagleEye() {
      this.$bus.emit("cesiumBusEvent", "eagleEye");
      this.defaultList.forEach((item) => {
        if (item.title === "鹰眼") {
          item.isActive = !item.isActive;
          setTimeout(() => {
            item.isActive
              ? this.$bus.emit("eagleEyePosition", "init")
              : this.$bus.emit("eagleEyePosition", "destroyed");
          }, 20);
        }
      });
    },
    // 7 截图
    toolsHandleScreenshots() {
      DxCommonUtils.tools.handleScreenshots();
    },
    // 8 删除
    toolsHandleDelete() {
      DxCommonUtils.removeAllEntities();
      // this.$bus.emit('cesiumBusEvent', 'deleteWidgets')
    },
    // 设置
    toolsHandleInstall() {
      DxCommonUtils.toolsHandleZoomAdd();
    },
    // 客服
    toolsHandleCustomerService() {
      DxCommonUtils.toolsHandleZoomAdd();
    },
    // 指北
    toolsHandleRefersToNorth() {
      DxCommonUtils.tools.handleRefersToNorth();
    },
    toolsHandleBigScreens() {
      this.$router.push("/bigScreen");
    },
  },
};
</script>

<style  lang="scss" scoped>
.cesium-viewer-toolbar-component {
  width: 28px !important;
  min-height: 32px !important;
  max-height: 420px !important;
  position: fixed;
  right: 2px;
  bottom: 60px !important;
  z-index: 100001;
  .toolbar-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    & > div {
      width: 28px;
      height: 28px;
      margin-bottom: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      background-color: #3f4854;
      color: #e6e6e6;
      fill: #e6e6e6;
      box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
      line-height: 32px;
      border-radius: 6px;
      font-size: 20px;
      cursor: pointer;
      border-radius: 14%;
      padding: 0;
      vertical-align: middle;
      border: 1px solid #444;
      & > i {
        transform: scale(0.8);
        transition: all 0.6s;
      }
    }
    & > div:last-child {
      margin-bottom: 0px;
    }
    & > div:hover {
      color: #fff;
      fill: #fff;
      background: #48b;
      border-color: #aef;
      box-shadow: 0 0 8px #fff;
      i {
        transform: scale(1.1);
      }
    }
  }
}
</style>
